<script lang="ts" setup>
import { useVModel } from "@/utils/useVModel";
import IconSvg from "@/components/IconSvg/index.vue";
import { imgApiUrl } from "@/services/upload";
import { getToken } from "@/utils/localToken";
const props = defineProps({
	modelValue: {
		type: Object,
		required: true,
	},
	nutritionItemList: {
		type: Array<{
			projectName: string;
			projectId: number;
		}>,
		default: () => [],
	},
	offlineNutritionItemList: {
		type: Array<{ projectName: string; projectId: number }>,
		default: () => [],
		required: true,
	},
	staffTitleList: {
		type: Array<{
			id: number;
			name: string;
		}>,
		default: () => [],
	},
	institutionList: {
		type: Array<{ id: number; name: string }>,
		default: () => [],
		required: true,
	},

	serviceType: {
		type: Array<{ id: number; name: string }>,
		default: () => [],
		required: true,
	},
});
const emit = defineEmits(["update:modelValue"]);

const model = useVModel(props, "modelValue", emit);

const formRef = ref();
const instance = getCurrentInstance();
onMounted(() => {
	if (instance && instance.exposed) {
		const entries = Object.entries(formRef.value.$.exposed);

		for (const [key, value] of entries) {
			instance.exposed[key] = value;
		}
	}
});

defineExpose(instance && instance.exposed ? { ...instance.exposed } : {});
const rules = ref({
	name: [{ required: true, message: "请输入营养师姓名", trigger: "change" }],
	phone: [{ required: true, message: "请输入联系电话", trigger: "change" }],
	institutionId: [{ required: true, message: "请选择执业机构", trigger: "change" }],
	staffTitleId: [{ required: true, message: "请选择营养师职称", trigger: "change" }],
	serviceTypeStr: [{ required: true, message: "请选择服务类型", trigger: "change" }],
});

const headers = computed(() => {
	return { Authorization: getToken() };
});
</script>

<template>
	<el-form :model="model" :rules="rules" label-width="auto" ref="formRef">
		<el-form-item label="营养师姓名：" prop="name">
			<el-input v-model="model.name" placeholder="请输入医师姓名" />
		</el-form-item>
		<el-form-item label="联系电话：" prop="phone">
			<el-input v-model="model.phone" placeholder="请输入联系电话" />
		</el-form-item>
		<el-form-item label="医疗机构：" prop="institutionId">
			<el-select v-model="model.institutionId" placeholder="请选择机构类型" style="width: 100%">
				<el-option v-for="item in institutionList" :key="item.id" :label="item.name" :value="item.id" />
			</el-select>
		</el-form-item>
		<el-form-item label="职称：" prop="staffTitleId">
			<el-select v-model="model.staffTitleId" placeholder="请选择医师职称" style="width: 100%">
				<el-option v-for="item in staffTitleList" :key="item.id" :label="item.name" :value="item.id" />
			</el-select>
		</el-form-item>
		<el-form-item label="服务类型：" prop="serviceTypeStr">
			<el-select v-model="model.serviceTypeStr" multiple placeholder="请选择服务类型" style="width: 100%">
				<el-option v-for="item in serviceType" :key="item.id" :label="item.name" :value="item.name" />
			</el-select>
		</el-form-item>
		<el-form-item label="上门指导价格：" prop="visitedPrice">
			<el-input type="number" v-model="model.visitedPrice" placeholder="请输入上门指导价格" />
		</el-form-item>
		<!-- <el-form-item label="擅长：" prop="expertiseIntro">
			<el-input v-model="model.expertiseIntro" placeholder="请输入医师擅长" />
		</el-form-item>
		<el-form-item label="执业经验：" prop="workingYear">
			<el-input v-model="model.workingYear" type="number" placeholder="请输入执业经验" />
		</el-form-item> -->
		<el-form-item label="简介：" prop="intro">
			<el-input v-model="model.intro" type="textarea" :row="2" placeholder="请输入医师简介" />
		</el-form-item>
		<el-form-item label="推荐指数：" prop="recommend">
			<el-input v-model="model.recommend" type="number" placeholder="请输入推荐指数" />
		</el-form-item>
		<el-form-item label="线上营养项目：" prop="projectIds">
			<el-checkbox-group v-model="model.projectIds">
				<el-checkbox
					v-for="item in nutritionItemList"
					:key="item.projectId"
					:label="item.projectName"
					:value="item.projectId"
				/>
			</el-checkbox-group>
		</el-form-item>
		<el-form-item label="线下营养项目：" prop="projectIds">
			<el-checkbox-group v-model="model.projectIds">
				<el-checkbox
					v-for="item in offlineNutritionItemList"
					:key="item.projectId"
					:label="item.projectName"
					:value="item.projectId"
				/>
			</el-checkbox-group>
		</el-form-item>
		<el-form-item label="排序：" prop="sort">
			<el-input v-model="model.sort" type="number" />
		</el-form-item>
		<el-form-item label="头像：" prop="headimgurl">
			<el-upload
				class="avatar-uploader"
				name="files"
				:action="imgApiUrl"
				:headers="headers"
				:show-file-list="false"
				:on-success="(response:any) => model.headimgurl = response?.data[0]"
			>
				<img v-if="model.headimgurl" :src="model.headimgurl" class="avatar" />
				<el-icon v-else class="avatar-uploader-icon"><IconSvg name="add" /></el-icon>
			</el-upload>
		</el-form-item>
		<el-form-item label="资格证书：" prop="cert">
			<el-upload
				class="avatar-uploader"
				name="files"
				:action="imgApiUrl"
				:headers="headers"
				:show-file-list="false"
				:on-success="(response:any) => model.staffPic = response?.data[0]"
			>
				<img v-if="model.cert" :src="model.cert" class="avatar" />
				<el-icon v-else class="avatar-uploader-icon"><IconSvg name="add" /></el-icon>
			</el-upload>
		</el-form-item>
		<el-form-item label="职称证书：" prop="staffPic">
			<el-upload
				class="avatar-uploader"
				:action="imgApiUrl"
				:headers="headers"
				name="files"
				:show-file-list="false"
				:on-success="(response:any) => model.staffPic = response?.data[0]"
			>
				<img v-if="model.staffPic" :src="model.staffPic" class="avatar" />
				<el-icon v-else class="avatar-uploader-icon"><IconSvg name="add" /></el-icon>
			</el-upload>
		</el-form-item>

		<el-form-item label="状态：" prop="isShow">
			<el-switch v-model="model.isShow" :active-value="1" :inactive-value="0" />
		</el-form-item>
	</el-form>
</template>
<style lang="scss" scoped>
:deep(.avatar-uploader) {
	.el-upload {
		position: relative;
		overflow: hidden;
		cursor: pointer;
		border: 1px dashed var(--el-border-color);
		border-radius: 6px;
		transition: var(--el-transition-duration-fast);
	}
	.obscuration {
		position: absolute;
		z-index: 100;
		display: flex;
		align-items: center;
		justify-content: space-around;
		width: 100px;
		height: 100px;
		padding: 20px;
		background: rgb(0 0 0 / 20%);
	}
	.el-upload:hover {
		border-color: var(--el-color-primary);
	}
	img {
		width: 100px;
		height: 100px;
	}
	.el-icon.avatar-uploader-icon {
		width: 100px;
		height: 100px;
		font-size: 28px;
		color: #8c939d;
		text-align: center;
	}
}
</style>
